<template>
  <div class="song-list">
    <div class="wrapper container">
      <!-- 顶部分类 -->
      <div class="top-inner">
        <h2 class="title">
          <div class="select">
            {{ selectedKeyWord }}<i class="iconfont icon-bottom"></i>
          </div>
          <div class="hot-tag">
            <p class="label">热门标签 :</p>
            <ul class="categroy">
              <li
                v-for="(item, index) in catList"
                :key="index"
                @click.stop="selectCat(item, index)"
                :class="{ active: keywordIndex === index }"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="tags">
            <div
              class="tab"
              v-for="(item, index) in tag"
              :key="index"
              :class="{ active: tagIndex === index }"
              @click.stop="showHotOrNew(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </h2>
      </div>
      <div v-loading="isLoading">
        <!-- 歌单列表 -->
        <div class="list-wrapper clearfix">
          <div class="song-item" v-for="(item, index) in songList" :key="index">
            <div class="cover">
              <el-image :src="item.coverImgUrl">
                <template slot="placeholder" class="image-slot">
                  <img src="../../assets/images/timg.jpg" />
                </template>
              </el-image>
              <span class="playlist-play">
                <img src="../../assets/images/btn-play.png" alt="" />
              </span>
              <span class="play-count">
                <i class="iconfont icon-play1"></i>
                {{ item.playCount | filterPlayCount }}
              </span>
            </div>
            <div class="info overflow2">{{ item.name }}</div>
          </div>
        </div>
        <!-- 分页栏 -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.currentPage"
            :page-size="40"
            layout="total, prev, pager, next"
            :total="pagination.total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHotCategory, getSongList } from '@/api/song_list'
export default {
  name: 'song-list',
  data () {
    return {
      // tag标签
      tag: [
        { name: '热门', order: 'hot' },
        { name: '最新', order: 'new' }
      ],
      tagIndex: 0,
      // 选中的关键字
      selectedKeyWord: '全部',
      keywordIndex: 0,
      catList: [],
      // 歌单列表数据
      songList: [],
      // 分页参数
      pagination: {
        currentPage: 1,
        total: 100
      },
      // 是否显示加载
      isLoading: false
    }
  },
  methods: {
    //
    // 当页码改变时
    handleCurrentChange (page) {
      this.pagination.currentPage = page
      this.getData()
    },
    // 热门与最新
    showHotOrNew (item, index) {
      this.tagIndex = index
      this.pagination.currentPage = 1
      this.getData()
    },
    // 选中分类关键字
    selectCat (item, index) {
      this.selectedKeyWord = item.name
      this.keywordIndex = index
      this.pagination.currentPage = 1
      this.getData()
    },
    // 封装获取歌单列表
    async getData () {
      this.isLoading = true
      const _params = {
        order: this.tag[this.tagIndex].order,
        cat: this.selectedKeyWord,
        limit: 40,
        offset: (this.pagination.currentPage - 1) * 40
      }
      const data = await getSongList(_params)
      if (data.code === 200) {
        this.songList = data.playlists
        this.pagination.total = data.total
        this.isLoading = false
      }
    }
  },
  created () {
    getHotCategory().then(res => {
      const _tags = res.tags
      _tags.unshift({ name: '全部' })
      this.catList = _tags
    })
    this.getData()
  }
}
</script>
<style lang="less" scoped>
.song-list {
  padding: 15px 0;
  .wrapper {
    // 头部分类
    .top-inner {
      padding: 0 15px;
      h2.title {
        margin: 0;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: normal;
        background-color: #f2f2f2;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        .select {
          cursor: pointer;
          width: 100px;
          height: 100%;
          background-color: @main-font-color;
          margin-right: 15px;
          text-align: center;
          .icon-bottom {
            padding-left: 8px;
            font-size: 14px;
          }
        }
        .hot-tag {
          flex: 1;
          display: flex;
          .label {
            margin: 0;
          }
          ul.categroy {
            display: flex;
            li {
              padding: 0 15px;
              cursor: pointer;
              &:hover {
                color: #878787;
              }
              &.active {
                color: @main-font-color;
              }
            }
          }
        }
        .tags {
          display: flex;
          padding-top: 7px;
          .tab {
            background-color: #ccc;
            font-size: 12px;
            height: 26px;
            padding: 0 10px;
            line-height: 26px;
            margin-right: 15px;
            border-radius: 2px;
            cursor: pointer;
            transition: background-color 0.5s;
            &.active {
              background-color: @main-font-color;
            }
          }
        }
      }
    }
    // 歌单列表
    .list-wrapper {
      margin-top: 20px;
      .song-item {
        cursor: pointer;
        float: left;
        padding: 0 15px;
        margin-bottom: 30px;
        width: 12.5%;
        height: 200px;
        .cover {
          position: relative;
          width: 100%;
          height: 142.5px;
          overflow: hidden;
          border-radius: 8px;
          &:hover .el-image {
            transform: scale(1.1);
          }
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            display: block;
            transition: transform 0.6s;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .play-count {
            position: absolute;
            padding: 0 10px;
            top: 5px;
            right: 5px;
            height: 20px;
            line-height: 20px;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 12px;
            text-align: center;
            border-radius: 12.5px;
            color: #fff;
            .icon-play1 {
              font-size: 12px;
              padding-right: 4px;
            }
          }
          &:hover .playlist-play img {
            opacity: 1;
          }
          .playlist-play {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -32px;
            margin-top: -32px;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: block;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              opacity: 0;
              transition: opacity 0.6s;
              &:hover {
                animation: playan 2s ease;
              }
            }
          }
        }
        .info {
          -webkit-line-clamp: 2;
          padding-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
    // 分页
    .pagination {
      text-align: center;
      /deep/ .el-pagination.is-background {
        .el-pager {
          li {
            &:not(.disabled).active {
              background-color: @main-font-color;
              color: #fff;
              &:hover {
                color: #fff;
              }
            }
            &:not(.disabled):hover {
              color: @main-font-color;
            }
          }
        }
      }
    }
  }
}
</style>
